import React, { Component } from "react";
import { Route,Switch,Redirect} from 'react-router-dom'

import Home from "../Home"; //路由组件
import About from "../About";
import Test from "../Test";
import Base from "../Base";
import Antd from "../Antd";
import Header from "../../components/Router/Header"; //一般组件
import MyNavLink from "../../components/Router/MyNavLink"; //一般组件
export default class Index extends Component {
  //状态在哪里，操作状态的方法就在哪里


  render() {
    return (
      <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <Header/>
        </div>
      </div>
      
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 原生html中,靠<a>跳转不同的页面 */}
            {/* <a className="list-group-item active" href="./about.html">About</a>
            <a className="list-group-item" href="./home.html">Home</a> */}

            {/* 在react中靠路由链接实现切换组件 */}
              {/* <NavLink activeClassName="atguigu" className="list-group-item" to="/home">home</NavLink>
              <NavLink activeClassName="atguigu" className="list-group-item" to="/about">about</NavLink> */}

              <MyNavLink to="/about" children='About'>About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
              <MyNavLink to="/test">Test</MyNavLink>
              <MyNavLink to="/base">Base</MyNavLink>
              <MyNavLink to="/antd">Antd</MyNavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                <Route path='/about' component={About} />
                <Route path='/home' component={Home} />
                <Route path='/test' component={Test} />
                <Route path='/base' component={Base} />
                <Route path='/antd' component={Antd} />
                <Redirect to="/base"></Redirect>
              </Switch>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    );
  }
}
